<template>
	<view class="m-body">
		<view class="m-header">
			维稳要情专报
		</view>
		<view class="m-num">第 {{ report.sub_title }} 期</view>
		<view class="m-info">
			<view>
				中共丽水市莲都区委政法委员会
			</view>
			<view>
				{{ report.title }}
			</view>
		</view>

		<view v-for="(item, index) in report.articles" :key="index">
			<view class="m-title">{{ item.title }}</view>
			<rich-text class="m-content" :nodes="item.content"></rich-text>
		</view>

		<view class="m-sign">
			<view>中共丽水市莲都区委政法委员会</view>
			<view>{{ report.title }}</view>
		</view>

		<view class="m-person">
			<view>报: {{ report.report_person }}</view>
			<view>送: {{ report.push_person }}</view>
			<view>份数: {{ report.num }} 份</view>
		</view>

		<view class="m-footer">
			<view>编校: {{ report.edit_person }}</view>
			<view>签发: {{ report.sign_issue }}</view>
		</view>
	</view>
</template>

<script>
	import * as API from 'server/getData'

	export default {
		data() {
			return {
				report: [],
			}
		},
		onLoad(e) {
			this.initData(e.id)
		},
		methods: {
			async initData(id) {
				let res = await API.articles.fetchReport({'id': id})
				if (res.success) {
					this.report = res.data
				}
				console.log(res)
			}
		}
	}
</script>

<style>
page {
	height: auto;
	min-height: 100%;
}
.m-footer {
	display: flex;
	padding: 5px 0px;
	justify-content: space-between;
}
.m-person {
	border-top: 1px solid #000000;
	border-bottom: 1px solid #000000;
	padding: 4px 0px;
}
.m-sign {
	display: flex;
	flex-direction: column;
    text-align: right;
	padding:10px 0px;
}
.m-body {
	padding: 10px;
}
.m-num {
	text-align: center;
}
.m-header{
	color:red;
	font-size: 28px;
	text-align: center;
}
.m-info{
	display: flex;
	padding-top: 10px;
	text-align: center;
	border-bottom: 2px solid red;
	justify-content: space-between;
}

.m-title {
	margin: 0.8em 0px;
	font-size: 22px;
	text-align: center;
}
.m-content {
	line-height: 2em;
	font-size: 16px;
}
</style>
